import React from 'react';
import {
  Layout,
  Card,
  Typography,
  Row,
  Col,
  Button,
  theme,
  Space,
  Avatar
} from 'antd';
import {
  CloudOutlined,
  EditOutlined,
  EnvironmentOutlined,
  FileTextOutlined,
  RightOutlined,
  CalculatorOutlined,
  SafetyCertificateOutlined,
  BarChartOutlined,
  RocketOutlined
} from '@ant-design/icons';
import { Link, useNavigate } from 'react-router-dom';

const { Content, Footer } = Layout;
const { Title, Paragraph, Text } = Typography;

const HomePage: React.FC = () => {
  const navigate = useNavigate();
  // 获取 Ant Design 的 Design Token，确保样式与全局主题一致
  const { token } = theme.useToken();

  const calculationModules = [
    {
      id: 'cave-calculation',
      title: '溶洞计算',
      description: '进行溶洞相关的计算和分析，包括承载力评估、稳定性分析等',
      icon: <EnvironmentOutlined />,
      path: '/cave-calculation'
    },
    {
      id: 'soil-water-conservation',
      title: '水土保持计算',
      description: '进行水土保持相关计算，评估工程对环境的影响',
      icon: <CloudOutlined />,
      path: '/soil-water-conservation'
    },
    {
      id: 'tunnel',
      title: '隧道计算',
      description: '计算隧道的各种荷载和应力分布，为隧道设计提供依据',
      icon: <EditOutlined />,
      path: '/tunnel'
    },
    {
      id: 'crossing-calculation',
      title: '穿跨越计算',
      description: '进行管道穿跨越工程的相关计算，包括跨越结构设计等',
      icon: <RocketOutlined />,
      path: '/crossing-calculation'
    }
  ];

  const features = [
    {
      icon: <CalculatorOutlined />,
      title: '专业算法',
      text: '内置经过验证的专业管道工程计算模型'
    },
    {
      icon: <BarChartOutlined />,
      title: '可视化展示',
      text: '计算结果图表化，直观呈现数据趋势'
    },
    {
      icon: <SafetyCertificateOutlined />,
      title: '标准规范',
      text: '严格遵循最新的国家及行业工程标准'
    },
    {
      icon: <FileTextOutlined />,
      title: '报告导出',
      text: '一键生成并导出标准化的计算报告书'
    }
  ];

  return (
    <Layout style={{ minHeight: '100vh', background: token.colorBgLayout }}>
      <Content style={{ padding: '0 24px' }}>
        {/* --- Hero Section: 头部欢迎区 --- */}
        <div
          style={{
            maxWidth: '1200px',
            margin: '40px auto 60px',
            textAlign: 'center',
            padding: '60px 24px',
            background: token.colorBgContainer,
            borderRadius: token.borderRadiusLG * 2,
            border: `1px solid ${token.colorBorderSecondary}`,
            boxShadow: token.boxShadow
          }}
        >
          <Avatar 
            size={80} 
            icon={<CalculatorOutlined />} 
            style={{ 
              backgroundColor: token.colorPrimary, 
              marginBottom: 24,
              boxShadow: token.boxShadow
            }} 
          />
          <Title level={1} style={{ marginBottom: 16, fontSize: '32px', fontWeight: 700 }}>
            管道工程计算系统
          </Title>
          <Paragraph
            type="secondary"
            style={{ fontSize: '18px', maxWidth: '700px', margin: '0 auto 32px', lineHeight: 1.6 }}
          >
            集成多项专业计算工具，致力于为工程师提供高效、精准的数字化解决方案。
            请从下方选择相应模块开始您的工作。
          </Paragraph>
          <Button
            type="primary"
            size="large"
            shape="round"
            icon={<FileTextOutlined />}
            onClick={() => navigate('/documents')}
            style={{ height: '48px', padding: '0 32px', fontSize: '16px' }}
          >
            查看使用指南
          </Button>
        </div>

        {/* --- Modules Section: 功能入口卡片 --- */}
        <div style={{ maxWidth: '1200px', margin: '0 auto 60px' }}>
          <div style={{ marginBottom: 24, display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ width: 4, height: 24, background: token.colorPrimary, borderRadius: 2 }}></div>
            <Title level={3} style={{ margin: 0 }}>核心计算模块</Title>
          </div>
          
          <Row gutter={[24, 24]}>
            {calculationModules.map((module) => (
              <Col xs={24} sm={12} md={12} lg={6} key={module.id}>
                <Link to={module.path} style={{ textDecoration: 'none' }}>
                  <Card
                    hoverable
                    variant="outlined"
                    style={{ 
                      height: '100%', 
                      borderRadius: token.borderRadiusLG,
                      transition: 'all 0.3s ease',
                      boxShadow: token.boxShadow
                    }}
                    styles={{
                      body: {
                        padding: '32px 24px',
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'center',
                        textAlign: 'center',
                        height: '100%'
                      }
                    }}
                  >
                    <div
                      style={{
                        width: '64px',
                        height: '64px',
                        borderRadius: '50%',
                        background: token.colorPrimaryBg,
                        color: token.colorPrimary,
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        fontSize: '28px',
                        marginBottom: '20px',
                        transition: 'transform 0.3s'
                      }}
                      className="module-icon"
                    >
                      {module.icon}
                    </div>
                    <Title level={4} style={{ marginBottom: 12 }}>{module.title}</Title>
                    <Paragraph type="secondary" style={{ marginBottom: 24, flex: 1 }}>
                      {module.description}
                    </Paragraph>
                    <Space style={{ color: token.colorPrimary, fontWeight: 500 }}>
                      进入计算 <RightOutlined style={{ fontSize: 12 }} />
                    </Space>
                  </Card>
                </Link>
              </Col>
            ))}
          </Row>
        </div>

        {/* --- Features Section: 特性展示 --- */}
        <div style={{ maxWidth: '1200px', margin: '0 auto 40px' }}>
           <Card bordered={false} style={{ borderRadius: token.borderRadiusLG, boxShadow: token.boxShadow }}>
             <Row gutter={[48, 24]}>
               {features.map((feature, index) => (
                 <Col xs={24} sm={12} lg={6} key={index}>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                      <Space align="center" style={{ marginBottom: 4 }}>
                        <span style={{ fontSize: 24, color: token.colorPrimary }}>{feature.icon}</span>
                        <Text strong style={{ fontSize: 16 }}>{feature.title}</Text>
                      </Space>
                      <Text type="secondary" style={{ fontSize: 14 }}>
                        {feature.text}
                      </Text>
                    </div>
                 </Col>
               ))}
             </Row>
           </Card>
        </div>
      </Content>

      <Footer style={{ textAlign: 'center', background: 'transparent' }}>
        <Text type="secondary" style={{ fontSize: 12 }}>
          © {new Date().getFullYear()} 中石化石油工程设计有限公司 - 管道工程设计所水工组
        </Text>
      </Footer>
    </Layout>
  );
};

export default HomePage;